<template>

  <div style="width:1200px; margin:0 auto">
    <Header></Header>

    <div>
      <h3>收货地址</h3>
      <el-card style="width: 300px; height: auto">
        <div slot="header" class="clearfix" >
          <span style="font-size: large">
            {{address.receiveName}}
          </span>
        </div>
        <div>{{address.phone}}</div>
        <div>{{address.address}}</div>
      </el-card>

      <h3>确认订单信息</h3>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          label="商品信息">
          <template slot-scope="scope">
          <span>
            <img class="lazy" :src="scope.row.picture" width="80px" height="100px">
          </span>
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="单价(元)" width="120">
          <template slot-scope="scope">
            {{ (scope.row.price * 0.01).toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="number"
          label="数量"
          width="150">
        </el-table-column>
        <el-table-column label="金额(元)" width="120">
          <template slot-scope="scope">
            {{ (scope.row.price * scope.row.number * 0.01).toFixed(2) }}
          </template>
        </el-table-column>
      </el-table>

      <div>
        <h3>给卖家留言：</h3><el-input type="textarea" placeholder="placeholder" v-model="comment" :autosize="{ minRows: 2, maxRows: 4}"></el-input>
      </div>
      <div style="padding: 10px 480px">
        应付金额: <span style="color: red"><span style="font-size: larger">{{(totalPrice * 0.01).toFixed(2) }}</span> 元</span>
        <el-button type="danger" @click="toPay">立即下单</el-button>
      </div>

    </div>

    <Footer></Footer>

  </div>

</template>

<script>
  import Footer from '@/components/Footer'
  import Header from '@/components/Header'
  import addressApi from '@/api/address'
  import orderApi from '@/api/order'

  export default {
    components: {
      Footer,
      Header
    },
    data() {
      return {
        multipleSelection: [],
        address: '',
        comment: '请尽快发货',
        orderId: 0,
        money: 0
      }
    },
    computed: {
      totalNum: function() {
        var total = 0
        for (var i = 0; i < this.tableData.length; i++) {
          var item = this.tableData[i]
          total += item.number
        }
        return total
      },
      totalPrice: function() {
        var total = 0
        for (var i = 0; i < this.tableData.length; i++) {
          var item = this.tableData[i]
          total += item.number * item.price
        }
        return total
      },
      tableData() {
        return this.$store.state.cart.shopCart
      },
      orderForm() {
        return {
          userId: this.$store.state.user.id,
          addressId: this.address.id,
          cartItems: this.tableData,
          comment: this.comment
        }
      }
    },

    created() {
      this.getAddress()
    },
    methods: {
      toPay() {
        orderApi.addOrder(this.orderForm).then(response => {
          this.orderId = response.data
          this.money = this.totalPrice
          this.$store.commit('clearCart')
          this.$router.push({
            path: '/front/pay',
            name: 'Pay',
            params: {
              totalPrice: this.money,
              orderId: this.orderId,
              address: this.address
            }
          })
        })
      },
      getAddress() {
        // addressApi.findByUserId(this.$store.state.user.id).then(response => {
        //   this.address = response.data
        // })
        addressApi.getUserAddress().then(response => {
          this.address = response.data
        })
      }
    }
  }
</script>

<style scoped>

</style>
